@charset "utf-8";
$fontsize:40;
@function r($px) {
    @return $px/$fontsize * 1rem;
}

.web {
    .advice {
        background: #171616;
        .hot_song {
            a {
                img {
                    width: r(38);
                    height: r(35);
                    margin-top: r(30);
                    margin-right: r(41);
                }
            }
        }
        .top_1 {
            width: 100%;
            height: r(94);
            background: #000000;
            .top {
                margin-top: r(20);
                margin-left: r(30);
                a {
                    img {
                        width: r(19);
                        height: r(34);
                    }
                }
            }
            .top1{
                width: r(250);
                text-align: center;
                margin:  0 auto;
                p{
                    line-height: r(94);
                    color: #FFFFFF;
                    font-size: r(35);
                }
            }
            .top2 {
                a {
                    img {
                        width: r(31);
                        height: r(8);
                        margin-top: r(45);
                        margin-right: r(41);
                    }
                }
            }
        }
        .LOGO_f3 {
            margin-left: r(20);
            a {
                img {
                    width: r(40);
                    height: r(40);
                    margin-right: r(20);
                    padding-top: r(25);
                }
            }
        }
        .advice_1 {
            width: 100%;
            height: r(294);
            background: #171616;
            position: absolute;
            top: r(94);
            .advice4 {
                width: r(90);
                height: r(90);
                border-radius: r(45);
                position:absolute ;
                top:r(142);
                left: r(640);
                background: #009cea;
                text-align: center;
                line-height: r(90);
            a {
                
                i {
                    font-size: r(30);
                    color: #FFFffF;
                }
            }
        }
            .advice_2 {
                margin-top: r(41);
                margin-left: r(30);
                a {
                    width: r(200);
                    height: r(200);
                    img {
                        width: r(200);
                        height: r(200);
                    }
                }
            }
            .advice_3 {
                .advice_3_1 {
                    color: #FFFFFF;
                    font-size: r(21);
                    margin-left: r(51);
                    margin-top: r(41);
                }
                .advice_3_2 {
                    color: #aca5a5;
                    font-size: r(21);
                    margin-left: r(51);
                    margin-top: r(14);
                    img {
                        vertical-align: middle;
                        width: r(10);
                        height: r(17);
                    }
                }
                .advice_3_3 {
                    a {
                        display: block;
                        font-size: r(30);
                        width: r(330);
                        height: r(90);
                        border: r(1) solid #FFFFFF;
                        border-radius: r(50);
                        background: #171616;
                        margin-left: r(51);
                        margin-top: r(42);
                        img {
                            width: r(34);
                            height: r(34);
                            margin-top: r(30);
                            margin-left: r(33);
                            float: left;
                            vertical-align: middle;
                        }
                        span {
                            display: inline-block;
                            color: #FFFFFF;
                            margin-left: r(62);
                            line-height: r(90);
                        }
                    }
                }
            }
        }
        
    }
    section {
        width: 100%;
        position: absolute;
        top: r(388);
        bottom: r(60);
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        P{
            white-space: normal;
            text-overflow: clip;
        }
        .advice_3_3 {
            display: block;
            font-size: r(24);
            width: r(319);
            height: r(120);
            border: r(1) solid #969b97;
            border-radius: r(40);
            background: #bdbdbd;
            margin-left: r(40);
            margin-top: r(42);
            a {
                float: left;
                display: inline-block;
                width: r(60);
                i {
                    font-size: r(50);
                    color: #15a4eb;
                    line-height: r(120);
                    padding-left: r(20);
                }
            }
            p {
                float: left;
                width: r(210);
                span {
                    display: inline-block;
                    color: #000;
                    padding-left: r(50);
                    line-height: r(60);
                }
            }
        }
        .advice5 {
            .bubble {
                width: r(539);
                height: r(140);
                background: #bdbdbd;
                position: relative;
                margin-left: r(30);
                margin-top: r(26);
                border-radius: r(50);
                p {
                    padding-left: r(31);
                    padding-top: r(34);
                    width: r(456);
                    height: 100%;
                    font-size: r(25);
                    line-height: r(40);
                }
            }
            .bubble:after {
                content: '';
                position: absolute;
                top: r(150);
                left: r(20);
                width: r(20);
                height: r(50);
                border-width: 0;
                border-style: solid;
                border-color: transparent;
                margin-top: r(-39);
                border-right-width: r(22);
                border-right-color: currentColor;
                border-radius: 0 0 r(40) 0;
                color: #bdbdbd;
            }
        }
        .advice6 {
            .bubble {
                width: r(340);
                height: r(100);
                background: #009ee7;
                position: relative;
                //              margin-left: r(30);
                margin-top: r(26);
                border-radius: r(50);
                margin-right: r(30);
                p {
                    padding-left: r(31);
                    padding-top: r(34);
                    width: r(331);
                    height: 100%;
                    font-size: r(25);
                    line-height: r(40);
                    color: #FFFFFF;
                }
            }
            .bubble1 {
                width: r(390);
                height: r(100);
                background: #009ee7;
                position: relative;
                margin-top: r(26);
                border-radius: r(50);
                margin-right: r(30);
                p {
                    padding-left: r(31);
                    padding-top: r(34);
                    width: r(380);
                    height: 100%;
                    font-size: r(24);
                    line-height: r(40);
                    color: #FFFFFF;
                }
            }
            .bubble:after,
            .bubble1:after {
                content: '';
                position: absolute;
                top: r(110);
                right: r(20);
                width: r(20);
                height: r(50);
                border-width: 0;
                border-style: solid;
                border-color: transparent;
                margin-top: r(-39);
                border-left-width: r(22);
                border-left-color: currentColor;
                border-radius: 0 0 0 r(40);
                color: #009ee7;
            }
        }
    }
    footer {
        width: 100%;
        height: r(60);
        position: absolute;
        bottom: 0;
        background: #f9f9f9;
        .advice8 {
            width: r(690);
            height: r(49);
            background: #f9f9f9;
            border-bottom: r(1) solid #d9d9d9;
            margin: 0 auto;
            .advice9 {
                .i1 {
                    width: r(640);
                    height: r(49);
                    border: 0;
                    border: 0;
                    background: #f9f9f9;
                    font-size: r(30);
                    float: left;
                }
            }
            .i2 {
                width: r(34);
                height: r(34);
            }
        }
    }
}